<template>
  <div class="app-container">
    <el-tabs v-model="tabsActiveName" @tab-click="handleClick">
      <el-tab-pane label="员工列表" name="staffList">
        <el-form :model="staffListQueryParams" ref="staffListQueryParams" :inline="true">
          <el-form-item>
            <el-button type="primary" size="mini" @click="goAddStaff">添加员工</el-button>
          </el-form-item>
          <el-form-item label="员工姓名:" prop="realname">
            <el-input
              v-model="staffListQueryParams.realname"
              placeholder="请输入员工姓名"
              clearable
              @keyup.enter.native="staffListHandleQuery"
            />
          </el-form-item>
          <el-form-item label="员工手机号:" prop="mobile">
            <el-input
              v-model="staffListQueryParams.mobile"
              placeholder="请输入员工手机号"
              clearable
              @keyup.enter.native="staffListHandleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="staffListResetQuery">重置</el-button>
            <el-button type="primary" size="mini" @click="staffListHandleQuery">查询</el-button>
            <el-button type="primary" size="mini" @click="batchDel">批量删除员工</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="staffsDataList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="员工姓名" prop="realname"/>
          <el-table-column label="微信信息">
            <template slot-scope="scope">
              <div class="info-box">
                <div class="img-box">
                  <img :src="scope.row.avatarUrl" alt=""/>
                </div>
                <div class="content-box">
                  <div>
                    {{ scope.row.nickname }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="员工手机号" prop="mobile"/>
          <el-table-column label="员工加入时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="微信二维码" prop="wxQrCode">
            <template slot-scope="scope">
              <image-preview v-if="scope.row.wxQrCode" :src="scope.row.wxQrCode" :width="50" :height="50"/>
              <span v-else>未上传</span>
            </template>
          </el-table-column>
          <el-table-column label="是否开启核销权限" prop="isVerification">
            <template slot-scope="scope">
              <span>{{ scope.row.isVerification == 1 ? '是':'否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="可访问活动数" prop="accessActivityNumber"/>
          <el-table-column fixed="right" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editStaff(scope.row)"
              >编辑
              </el-button>
              <el-button
                type="text"
                @click="removeStaff(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="staffListTotal>0"
          :total="staffListTotal"
          :page.sync="staffListQueryParams.pageNum"
          :limit.sync="staffListQueryParams.pageSize"
          @pagination="getStaffDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="战队管理" name="teamMange">
        <el-row class="mb8">
          <template>
            选择活动：
            <ActivitySelector
              style="width: 500px"
              placeholder="请选择"
              v-model="staffTeamListQueryParams.activityId"
              retrun-type="string"
              :not-show-all-option="true"
              :default-first="true"
            />
          </template>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              size="mini"
              @click="addTeam"
            >添加战队</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" size="mini" @click="goAddStaff">添加员工</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getStaffTeamDataList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="staffTeamDataList">
          <el-table-column label="序号" type="index" width="200">
            <template slot-scope="scope">
              <span>{{(staffTeamListQueryParams.pageNum - 1) * staffTeamListQueryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="战队名称" prop="teamName"/>
          <el-table-column label="员工数量" prop="staffNumber"/>
          <el-table-column label="创建时间" prop="createTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="teamManage(scope.row)"
              >管理员工战队</el-button>
              <el-button
                type="text"
                @click="delTeam(scope.row)"
              >删除战队</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="staffTeamDataListTotal>0"
          :total="staffTeamDataListTotal"
          :page.sync="staffTeamListQueryParams.pageNum"
          :limit.sync="staffTeamListQueryParams.pageSize"
          @pagination="getStaffTeamDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="员工访问权限" name="staffAuthority">
        <div class="warning-tip-card">
          员工若无活动的访问权限，员工后台不展示对应活动。
        </div>
        <el-row class="mb8">
          <template>
            活动：
            <ActivitySelector
              style="width: 500px"
              placeholder="请选择"
              v-model="staffAuthorityQueryParams.activityId"
              retrun-type="string"
              :not-show-all-option="true"
              clearable
              @change="changeActivity"
            />
          </template>
        </el-row>
        <el-table v-loading="loading" :data="activityDataList">
          <el-table-column label="序号" width="150">
            <template slot-scope="scope">
              <span>{{(staffAuthorityQueryParams.pageNum - 1) * staffAuthorityQueryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="活动名称" prop="title" width="800"/>
          <el-table-column label="访问权限" prop="visibleRange"/>
          <el-table-column fixed="right" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="allStaffVisit(scope.row)"
              >所有员工可见
              </el-button>
              <el-button
                type="text"
                @click="editVisitRange(scope.row)"
              >编辑权限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="员工/战队数据" name="staffOfTeamData">
        <StaffTeamData v-if="this.tabsActiveName === 'staffOfTeamData'"/>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="编辑员工" :visible.sync="staffOpen" width="500px" :inlist="true" append-to-body>
      <el-form ref="staffForm" :model="staffForm" label-width="100px">
        <div class="editStaffTip">
          当员工上传二维码且活动中开启“客服二维码“功能，员工分享的活动将仅展示该员工的二维码和联系方式。
        </div>
        <el-form-item label="员工姓名:" prop="realname">
          <el-input v-model="staffForm.realname" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="手机号:" prop="mobile">
          <el-input v-model="staffForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="核销权限:" prop="isVerification">
          <div>
            <el-switch
              v-model="staffForm.isVerification"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </div>
        </el-form-item>
        <el-form-item label="微信二维码:" prop="wxQrCode">
          <ImageUpload v-model="staffForm.wxQrCode" :limit="1"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitStaffForm">确 定</el-button>
        <el-button size="mini" @click="staffOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加战队" :visible.sync="staffTeamOpen" width="400px" :inlist="true" append-to-body>
      <el-form ref="staffForm" :model="staffTeamForm">
        <el-form-item prop="teamName">
          <el-input v-model="staffTeamForm.teamName" placeholder="请输入战队名称" maxlength="40"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitStaffTeamForm">确 定</el-button>
        <el-button size="mini" @click="staffTeamOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="teamManageTitle" :visible.sync="teamManageOpen" width="700px" :inlist="true" @close="handleDialogClose" append-to-body>
      <div  class="teamManageQuery">
        <span>
        员工：<el-input style="width: 50%" v-model="teamManageQueryParams.keyword" placeholder="请输入员工姓名或微信昵称"/>
        <el-button class="button-class" type="primary" size="small" @click="teamStaffListHandleQuery">查询</el-button>
        <el-button class="button-class" size="small" @click="teamStaffListResetQuery">重置</el-button>
      </span>
      </div>
      <el-table :data="teamStaffList">
        <el-table-column label="员工" prop="realname"/>
        <el-table-column label="微信信息">
          <template slot-scope="scope">
            <div class="info-box">
              <div class="img-box">
                <img :src="scope.row.avatarUrl" alt=""/>
              </div>
              <div class="content-box">
                <div>
                  {{ scope.row.nickname }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="removeTeam(scope.row)"
              >移除战队
              </el-button>
            </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="teamStaffTotal>0"
        :total="teamStaffTotal"
        :page.sync="teamManageQueryParams.pageNum"
        :limit.sync="teamManageQueryParams.pageSize"
        @pagination="getTeamStaffList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="goAddStaffTeam">添加战队员工</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="teamManageTitle" :visible.sync="teamNoExistStaffOpen" width="700px" :inlist="true" append-to-body>
      <div  class="teamManageQuery">
        <span>
        员工：<el-input style="width: 50%" v-model="teamNoExistStaffQueryParams.keyword" placeholder="请输入员工姓名或微信昵称"/>
        <el-button class="button-class" type="primary" size="small" @click="teamNoExistStaffListHandleQuery">查询</el-button>
        <el-button class="button-class" size="small" @click="teamNoExistStaffListResetQuery">重置</el-button>
      </span>
      </div>
      <el-table :data="teamNoExistStaffList" @selection-change="teamNoExistStaffSelectionChange">
        <el-table-column type="selection" width="50"/>
        <el-table-column label="员工" prop="realname"/>
        <el-table-column label="微信信息">
          <template slot-scope="scope">
            <div class="info-box">
              <div class="img-box">
                <img :src="scope.row.avatarUrl" alt=""/>
              </div>
              <div class="content-box">
                <div>
                  {{ scope.row.nickname }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="当前活动访问权限" prop="isCreateActivityAuth"/>
      </el-table>
      <pagination
        v-show="teamNoExistStaffTotal>0"
        :total="teamNoExistStaffTotal"
        :page.sync="teamNoExistStaffQueryParams.pageNum"
        :limit.sync="teamNoExistStaffQueryParams.pageSize"
        @pagination="getTeamNoExistStaffPageList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="addStaffToTeam">添加战队员工至{{ teamManageTitle }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑权限" :visible.sync="editVisitRangeOpen" width="700px" :inlist="true" append-to-body>
      <div class="editVisitRangeOpenTitle">{{ editVisitRangeQueryParams.title }}</div>
      <div class="teamManageQuery">
        <el-input
          v-model="editVisitRangeQueryParams.realname"
          placeholder="请输入员工姓名"
          clearable
          @keyup.enter.native="editVisitRangeQueryQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="editVisitRangeQueryQuery"></el-button>
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="editVisitRangesStaffList"
        @select="handleSelection"
        @select-all="handleAllChange"
        :row-key="getRowKeys"
        @="addStaffVisitActivityCancel"
      >
        <el-table-column type="selection" :reserve-selection="true" width="50"/>
        <el-table-column label="姓名" prop="realname"/>
        <el-table-column label="微信信息">
          <template slot-scope="scope">
            <div class="info-box">
              <div class="img-box">
                <img :src="scope.row.avatarUrl" alt=""/>
              </div>
              <div class="content-box">
                <div>
                  {{ scope.row.nickname }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="加入时间" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="editVisitRangeStaffTotal>0"
        :total="editVisitRangeStaffTotal"
        :page.sync="editVisitRangeQueryParams.pageNum"
        :limit.sync="editVisitRangeQueryParams.pageSize"
        @pagination="editVisitRangeStaffList"
      />
      <div slot="footer">
        <el-button size="small" type="primary" @click="addStaffVisitActivity">确 定</el-button>
        <el-button size="small" @click="addStaffVisitActivityCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--  添加员工  -->
    <el-dialog title="添加员工" :visible.sync="addStaffOpen" width="600px" :inlist="true" @close="closeAddStaff">
      <div class="add-desc">
        <p>员工用微信扫此码即可加入员工系统；</p>
        <p>为了避免出现客户下单无法归属员工业绩的情况，请让其<span class="mark-text">成为员工之后重新生成活动分享海报。</span></p>
      </div>
      <div class="is-verification-config">
        <span class="verification-config-title">核销权限:</span>
        <el-switch v-model="isVerification" class="drawer-switch verification-config-value"/>
      </div>
      <div class="qr-code" v-if="qrImg">
        <img :src="qrImg"/>
      </div>
      <div class="expireTimeStamp" v-if="qrImg && qrImg !== ''">
        <div>此二维码72小时内有效</div>
        <div>失效时间:{{ parseTime(this.expireTimeStamp, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="qrImg === ''" @click="makeCode">生成添加员工二维码</el-button>
        <el-button type="primary" v-if="qrImg && qrImg !== ''" @click="downloadQRCodeImg(qrImg)">保存二维码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  staffPageList, getStaffDetailById, updateStaff, delStaff,
  staffTeamPageList, addStaffTeam, delStaffTeam, teamStaffPageList,
  removeTeam, teamNoExistStaffPageList, addStaffToTeam,isVisitStaffPageList,addStaffVisitActivity,relateActivityStaffList
} from "@/api/triones/staff";
import { visitAuthActivityPageList,allStaffVisit } from "@/api/triones/activity";
import ActivitySelector from "@/components/yjj/ActivitySelector"
import StaffTeamData from './components/staffTeamData'
import AraleQRCode from "arale-qrcode";
import moment from 'moment';
export default {
  name: "index",
  components: { ActivitySelector,StaffTeamData },
  data() {
    return {
      tabsActiveName: 'staffList',
      tabsChildActiveName: 'staffDataDetail',
      staffListQueryParams: {
        pageNum: 1,
        pageSize: 10,
        realname: undefined,
        mobile: undefined
      },
      loading: false,
      staffsDataList: [],
      staffListTotal: 0,
      staffOpen: false,
      staffForm: {},
      activityList: [],
      showSearch: true,
      registerDateRange: [],
      statsDateRange: [],
      ids: [],
      single: true,
      multiple: true,

      staffTeamListQueryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined
      },
      staffTeamDataList: [],
      staffTeamDataListTotal: 0,
      staffTeamOpen: false,
      staffTeamForm: {},
      teamManageTitle: undefined,
      teamManageOpen: false,
      teamStaffList: [],
      teamStaffTotal: 0,
      teamManageQueryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        id: undefined,
      },
      teamNoExistStaffOpen: false,
      teamNoExistStaffQueryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        id: undefined,
        activityId: undefined
      },
      teamNoExistStaffList: [],
      teamNoExistStaffTotal: 0,
      teamNoExistStaffIds: [],
      teamNoExistStaffSingle: true,
      teamNoExistStaffMultiple: true,
      /** 员工访问权限 */
      staffAuthorityQueryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined
      },
      activityDataList: [],
      activityDataTotal: 0,
      editVisitRangeOpen: false,
      editVisitRangeQueryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
        title: undefined,
        realname: undefined
      },
      editVisitRangesStaffList: [],
      editVisitRangeStaffTotal: 0,
      editVisitRangeStaffIds: [],
      editVisitRangeStaffSingle: true,
      editVisitRangeStaffMultiple: true,
      addStaffOpen: false,
      isVerification: false,
      qrImg: '',
      expireTimeStamp: ''
    }
  },
  watch: {
    'isVerification': {
      handler(val) {
        this.qrImg = '';
      }
    }
  },
  created() {
    if (this.$route.query.tabsActiveName) {
      this.tabsActiveName = this.$route.query.tabsActiveName
    }
    this.getStaffDataList();
  },
  methods: {
    handleDialogClose() {
      this.getStaffTeamDataList();
    },
    /** 切换标签页 */
    handleClick(tab, event) {
      if (tab.name === 'staffList') {
        this.getStaffDataList();
      }
      if (tab.name === 'teamMange') {
        this.getStaffTeamDataList();
      }
      if (tab.name === 'staffAuthority') {
        this.getVisitAuthActivityDataList();
      }
    },
    /** 获取员工列表 */
    getStaffDataList() {
      this.loading = true;
      staffPageList(this.staffListQueryParams).then(response => {
        this.staffsDataList = response.rows;
        this.staffListTotal = response.total;
        this.loading = false;
      })
    },
    /** 员工列表查询重置 */
    staffListResetQuery() {
      this.resetForm("staffListQueryParams");
      this.staffListHandleQuery();
    },
    /** 员工列表检索 */
    staffListHandleQuery() {
      this.staffListQueryParams.pageNum = 1;
      this.getStaffDataList();
    },
    /** 编辑用户 */
    editStaff(row) {
      this.staffFormReset();
      this.getStaffById(row.id);
      this.staffOpen = true;
    },
    /** 删除员工 */
    removeStaff(row) {
      const ids = row.id;
      this.$modal.confirm('是否确认删除员工姓名为"' + row.realname + '"的数据项？').then(() => {
        delStaff(ids);
        this.getStaffDataList();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 员工表单重置 */
    staffFormReset() {
      this.staffForm = {
        id: undefined,
        realname: undefined,
        wxUserId: undefined,
        mobile: undefined,
        wxQrCode: undefined,
        isVerification: undefined
      }
      this.resetForm("staffForm");
    },
    /** 获取员工详情 */
    getStaffById(id) {
      getStaffDetailById(id).then(response => {
        this.staffForm = response.data;
      })
    },
    /** 提交 */
    submitStaffForm() {
      updateStaff(this.staffForm).then(response => {
        this.$message.success("操作成功");
        this.getStaffDataList();
        this.staffOpen = false;
      })
    },
    /** 多选 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 批量删除 */
    batchDel() {
      if (this.ids.length <= 0) {
        return this.$message.warning("请选择");
      }
      this.$modal.confirm('是否确认删除选择的员工数据项？').then(() => {
        delStaff(this.ids).then(response => {
          this.$modal.msgSuccess("删除成功");
          this.getStaffDataList();
        });
      })
    },
    /** 获取战队列表 */
    getStaffTeamDataList() {
      this.loading = true;
      staffTeamPageList(this.staffTeamListQueryParams).then(response => {
        this.staffTeamDataList = response.rows;
        this.staffTeamDataListTotal = response.total;
        this.loading = false;
      })
    },
    /** 添加战队 */
    addTeam() {
      this.staffTeamForm = {
        teamName: undefined
      }
      this.staffTeamOpen = true;
    },
    /** 添加战队 */
    submitStaffTeamForm() {
      const params = {
        ...this.staffTeamForm,
        activityId: this.staffTeamListQueryParams.activityId
      }
      addStaffTeam(params).then(response => {
        this.$message.success("操作成功");
        this.getStaffTeamDataList();
        this.staffTeamOpen = false;
      })
    },
    /** 删除战队 */
    delTeam(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除战队名称为' + row.teamName + '的数据项？').then(() => {
        delStaffTeam(id).then(response => {
          this.$modal.msgSuccess("删除成功");
          this.getStaffTeamDataList();
        });
      })
    },
    /** 管理战队 */
    teamManage(row) {
      this.teamManageTitle = row.teamName;
      this.teamManageQueryParams.id = row.id;
      this.getTeamStaffList();
      this.teamManageOpen = true;
    },
    /** 获取战队的员工列表 */
    getTeamStaffList() {
      teamStaffPageList(this.teamManageQueryParams).then(response => {
        this.teamStaffList = response.rows;
        this.teamStaffTotal = response.total;
      })
    },
    /** 移除战队 */
    removeTeam(row) {
      this.$modal.confirm('是否确认移除员工姓名为' + row.realname + '的数据？').then(() => {
        removeTeam(row.id,this.teamManageQueryParams.id).then(response => {
          this.$modal.msgSuccess("移除成功");
          this.getTeamStaffList();
        });
      })
    },
    /** 战队管理检索 */
    teamStaffListHandleQuery() {
      this.teamManageQueryParams.pageNum = 1;
      this.getTeamStaffList();
    },
    /** 战队管理重置 */
    teamStaffListResetQuery() {
      this.teamManageQueryParams.keyword = undefined;
      this.teamStaffListHandleQuery();
    },
    /** 添加战队员工 */
    goAddStaffTeam() {
      this.getTeamNoExistStaffPageList();
      this.teamNoExistStaffOpen = true;
    },
    /** 获取不属于战队的用户 */
    getTeamNoExistStaffPageList() {
      this.teamNoExistStaffQueryParams.id = this.teamManageQueryParams.id;
      teamNoExistStaffPageList(this.teamNoExistStaffQueryParams).then(response => {
        this.teamNoExistStaffList = response.rows;
        this.teamNoExistStaffTotal = response.total;
      })
    },
    /** 多选 */
    teamNoExistStaffSelectionChange(selection) {
      this.teamNoExistStaffIds = selection.map(item => item.id);
      this.teamNoExistStaffSingle = selection.length != 1;
      this.teamNoExistStaffMultiple = !selection.length;
    },
    /** 添加员工至某战队 */
    addStaffToTeam() {
      if (this.teamNoExistStaffIds.length <= 0) {
        return this.$message.warning("请选择");
      }
      addStaffToTeam(this.teamNoExistStaffIds,this.teamNoExistStaffQueryParams.id).then(response => {
        this.$message.success("操作成功");
        this.getTeamStaffList();
        this.teamNoExistStaffOpen = false;
        this.teamNoExistStaffQueryParams  = {
          pageNum: 1,
          pageSize: 10,
          keyword: undefined,
          id: undefined,
          activityId: undefined
        }
      })
    },
    /** 不属于某战队的检索 */
    teamNoExistStaffListHandleQuery() {
      this.teamNoExistStaffQueryParams.pageNum = 1;
      this.getTeamNoExistStaffPageList();
    },
    /** 不属于某战队的重置 */
    teamNoExistStaffListResetQuery() {
      this.teamNoExistStaffQueryParams.keyword = undefined;
      this.teamNoExistStaffListHandleQuery();
    },
    /** 选择 */
    changeActivity(value) {
      console.log('value')
      this.staffAuthorityQueryParams.activityId = value;
      this.getVisitAuthActivityDataList();
    },
    /** 获取查询带访问权限的活动列表 */
    getVisitAuthActivityDataList() {
      visitAuthActivityPageList(this.staffAuthorityQueryParams).then(response => {
        this.activityDataList = response.rows;
        this.activityDataTotal = response.total;
      })
    },
    /** 设置所有员工可见 */
    allStaffVisit(row) {
      this.$modal.confirm('确认所有员工都可访问该活动？').then(() => {
        allStaffVisit(row.id).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getVisitAuthActivityDataList();
        });
      })
    },
    /** 编辑活动可见范围 */
    editVisitRange(row) {
      this.editVisitRangeQueryParams.activityId = row.id
      this.editVisitRangeQueryParams.title = row.title;
      this.editVisitRangeQueryParams.pageNum = 1;
      this.getRelateActivityStaffList();
      this.editVisitRangeStaffList();
      console.log('this.editVisitRangeStaffIds',this.editVisitRangeStaffIds)
      this.editVisitRangeOpen = true;
    },
    /** 编辑权限检索 */
    editVisitRangeQueryQuery() {
      this.editVisitRangeQueryParams.pageNum = 1;
      this.editVisitRangeStaffList();
    },
    /** 编辑权限员工列表 */
    editVisitRangeStaffList() {
      isVisitStaffPageList(this.editVisitRangeQueryParams).then(response => {
        this.editVisitRangesStaffList = response.rows;
        this.editVisitRangeStaffTotal = response.total;
        if (this.editVisitRangesStaffList) {
          this.$nextTick(() => {
            this.editVisitRangesStaffList.forEach(item => {
              if (this.editVisitRangeStaffIds.includes(item.id)) {
                console.log('item',item)
                this.$refs.multipleTable.toggleRowSelection(item, true);
              }
            })
          })
        }
      })
    },
    /** 获取所有已经关联过该活动的员工列表 */
    getRelateActivityStaffList() {
      this.editVisitRangeStaffIds = [];
      relateActivityStaffList(this.editVisitRangeQueryParams.activityId).then(response => {
        if (response.data) {
          for(let i=0;i<response.data.length;i++){
            this.editVisitRangeStaffIds.push(response.data[i].id)
          }
        }
      })
    },
    /** 返回唯一主键 */
    getRowKeys(row) {
      return row.id;
    },
    /** 单选、取消单选 */
    handleSelection(selectes, row) {
      if (!this.editVisitRangeStaffIds.includes(row.id)) {
        this.editVisitRangeStaffIds.push(row.id);
      } else {
        this.editVisitRangeStaffIds.forEach((id, index) => {
          if (id == row.id) {
            this.editVisitRangeStaffIds.splice(index, 1);
          }
        });
      }
    },
    /** 全选、取消全选 */
    handleAllChange(rows) {
      if (rows.length > 0) {
        rows.forEach(item => {
          if (!this.editVisitRangeStaffIds.includes(item.id)) {
            this.editVisitRangeStaffIds.push(item.id);
          }
        });
      } else {
        this.editVisitRangesStaffList.forEach(item => {
          this.editVisitRangeStaffIds.forEach((id, index) => {
            if (id === item.id) {
              this.editVisitRangeStaffIds.splice(index, 1);
            }
          });
        });
      }
    },
    /** 添加员工的活动访问权限 */
    addStaffVisitActivity() {
      if (this.editVisitRangeStaffIds.length <= 0) {
        return this.$message.warning("请选择");
      }
      addStaffVisitActivity(this.editVisitRangeStaffIds,this.editVisitRangeQueryParams.activityId).then(response => {
        this.$message.success("操作成功");
        this.editVisitRangeQueryParams = {
          pageNum: 1,
          pageSize: 10,
          activityId: undefined,
          title: undefined,
          realname: undefined
        }
        this.editVisitRangeOpen = false;
        this.getVisitAuthActivityDataList();
      })
    },
    /** 取消编辑权限 */
    addStaffVisitActivityCancel() {
      this.$refs.multipleTable.clearSelection();
      this.editVisitRangeOpen = false;
    },
    /** 去添加员工 */
    goAddStaff() {
      this.addStaffOpen = true;
    },
    /** 生成二维码 */
    makeCode() {
      this.expireTimeStamp = Number(moment().format('X')) + 72 * 60 * 60;
      let isVerification = 0;
      if (this.isVerification) {
        isVerification = 1;
      }
      // const text = 'https://sjd.hxtcsx.com/addStaff?userId=1&isVerification=1&expireTimeStamp=12345678';
      const text = 'https://sjd.hxtcsx.com/addStaffFormal?userId=' + this.$store.getters.userId +
        '&isVerification=' + isVerification + '&expireTimeStamp=' + this.expireTimeStamp;
      const result = new AraleQRCode({
        render: "svg",
        text: text,
        size: 150,
      });
      const svgXml = new XMLSerializer().serializeToString(result);
      const src =
        "data:image/svg+xml;base64," +
        window.btoa(unescape(encodeURIComponent(svgXml)));
      // 本地存储图片
      localStorage.setItem("image", src);
      this.getQrCodeImg();
    },
    /** 获取存储的图片给到页面 */
    getQrCodeImg() {
      this.qrImg = localStorage.getItem("image");
      localStorage.removeItem("image");
    },
    /** 保存二维码 */
    downloadQRCodeImg(img) {
      let url=img
      //下载图片时的名称 没有名称时可直接获取时间戳 用时间戳命名
      let imgName = Math.round(new Date());
      let image = new Image()
      //设置图像的跨域属性
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
        let canvas = document.createElement('canvas')//创建canvas
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        //图片转为文件流
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob)
          this.download(url, imgName)
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    },
    /** 下载图片 创建a标签的方法 */
    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    },
    /** 关闭二维码的创建 */
    closeAddStaff() {
      this.qrImg = '';
      this.addStaffOpen = false;
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.warning-tip-card {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #fffbe6;
  font-size: 14px;
  border: 2px solid #facd40;
  border-radius: 4px;
}

.editStaffTip{
  padding: 10px;
  height: auto;
  color: #2254f5;
  background-color: #e7f1fe;
  margin-bottom: 10px;
}

.dialog-footer{
  text-align: center;
}

.teamManageQuery {
  padding: 10px;
  margin-bottom: 10px;
}

.editVisitRangeOpenTitle{
  text-align: center;
  font-weight: bold;
}

.add-desc {
  font-size: 16px;
  .mark-text {
    color: #ff421a;
  }
}

.is-verification-config {
  align-content: center;
  .verification-config-title {
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
  }
  .verification-config-value {
    vertical-align: middle;
    padding-left: 40px;
  }
}

.expireTimeStamp {
  text-align: center;
  font-size: 16px;
  > div {
    padding: 10px 0;
  }
}

.qr-code {
  text-align: center;
}
</style>
